<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="pageQuery" class="user-search" v-if="user.role == '100'">
      <el-form-item label="搜索：">
        <el-input size="small" clearable v-model="pageQuery.courseName" placeholder="课程名称"></el-input>
      </el-form-item>
      <el-form-item label="负责老师名称">
        <el-input size="small" clearable v-model="pageQuery.teacherName" placeholder="负责老师名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-button v-if="user.role == '100'" type="warning" @click="addCourse" style="margin-bottom: 20px">添加课程</el-button>
    <el-table size="small" :data="courseList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" prop="id" label="课程
      编号" width="200">
      </el-table-column>
      <el-table-column align="center" prop="courseName" label="课程名称" width="200">
      </el-table-column>
      <el-table-column v-if="user.role == '100'" align="center" prop="teacherName" label="课程负责老师" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button v-if="user.role == '100'" size="mini" @click="editCourse(scope.row)">编辑</el-button>
          <el-button v-if="user.role == '10'" size="mini" @click="setCourse(scope.row)">设置成绩结构</el-button>
          <el-button v-if="user.role == '100'" size="mini" type="danger" @click="deleteCourse(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageQuery" :total="total" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="editTitle" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="课程名称" prop="courseName">
          <el-input size="small" v-model="editForm.courseName" auto-complete="off" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程负责老师" prop="teacherId">
          <el-select v-model="editForm.teacherId" clearable placeholder="课程负责老师">
            <el-option :label="item.name" :value="item.id" v-for="item in teacherList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editOrAdd ? 'editForm' : 'addForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 编辑界面 老师的成绩设置dialog -->
    <el-dialog :title="gradeDetail.courseName+'课程分数结构'" :visible.sync="gradeVisible" width="30%" @click="closeGrade">
      <div class="grade-box">
        <el-button class="add-grade" type="warning" size="small" @click="addGradeDialog">增加分数结构</el-button>
        <div v-for="(item, index) in gradeDetail.gradeList" :key="index">
          <span>{{item.describes}}</span>：<span class="el-button-1">{{item.scale}}%</span> <el-button type="danger" size="mini" @click="deleteGrade(index)">删除此结构</el-button>
          <el-divider></el-divider>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeGrade">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="sureSetting">确认设置</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分数结构添加" :visible.sync="gradeDialog" width="30%" @click="gradeDialog=false">
      <el-form label-width="140px" :model="gradeForm" :rules="gradeRules" ref="gradeForm">
        <el-form-item label="结构名字" prop="describes">
          <el-input size="small" v-model="gradeForm.describes" auto-complete="off" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="结构分数占比（%）" prop="scale">
          <el-input-number v-model="gradeForm.scale" :min="1" :max="100" label="分数占比"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" class="title" @click="addGrade">确认添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Pagination from '../../components/Pagination'
export default {
  name:'CourseDetail',
  data() {
    return {
      gradeDialog: false, // 结构添加dialog
      gradeDetail: { // grade dialog
        id: '',
        courseName: '',
        gradeList: []
      },
      gradeVisible: false, // 老师 成绩dialog
      editOrAdd: true, // 编辑 / 新增 => true / false
      courseList: [], //课程列表
      teacherList: [], 
      pageQuery: {
        courseName: '',
        teacherName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false, //是显示加载
      editFormVisible: false, // 编辑框是否弹出
      editTitle: '编辑课程',
      editForm: {
        id: '',
        courseName: '',
        teacherId: ''
      },
      gradeForm: {
        describes: '',
        scale: 1,
      },
      gradeRules: {
        describes: [
          { required: true, message: '请输入结构名称', trigger: 'blur' }
        ]
      },
      // rules表单验证
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        teacherId: [{ required: true, message: '请选择教师', trigger: 'change' }]
      },
      levelList: [
      ]
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    if (this.user.role == '100') {
      this.getCourseList()
      this.getTeacherList()
    } else {
      this.getTeacherCourseList()
    }
  },
  methods: {
    /**
     * 搜索
     */
    search () {
      this.getCourseList()
    },
    /**
     * 老师权限 获取该老师负责得课程
     */
    getTeacherCourseList () {
      this.loading = true
      let query = {
        teacherId: this.user.id,
        pageNum: 1,
        pageSize: 10
      }
      this.$api.course.getTeacherCourseList(query).then(res => {
        if (res.code === 200) {
          this.courseList = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    /**
     * 增加分数结构
     */
    addGrade () {
      const {describes, scale} = this.gradeForm
      this.gradeDetail.gradeList.push({
        describes: describes,
        scale: scale
      })
      console.log(this.gradeDetail.gradeList);
      this.closeGradeInner()
    },
    /**
     * 最内层dialog grade关闭
     */
    closeGradeInner () {
        this.gradeDialog = false
    },
    addGradeDialog () {
      this.gradeDialog = true
      this.gradeForm.describes = ''
      this.gradeForm.scale = 1
    },
    /**
     * 删除分数结构
     */
    deleteGrade (index) {
      this.gradeDetail.gradeList.splice(index, 1)
    },
    closeGrade () {
      this.gradeVisible = false
    },
    /**
     * 老师权限 dialog弹出
     */
    setCourse (course) {
      this.gradeDetail.id = course.id
      this.gradeDetail.courseName = course.courseName
      this.gradeVisible = true
      if (course.scoreStructure) { 
        let query = {
          courseId: course.id
        }
        this.$api.course.getTeacherCourseDetail(query).then(res => {
          if (res.code === 200) {
            this.gradeDetail.gradeList = res.data.scoreStructureList.map(item => {
              return {
                describes: item.describes,
                scale: Number(item.scale) * 100
              }
            })
          }
        })
      }
    },
    /**
     * 老师权限 确认设置
     */
    sureSetting () {
      let total = this.gradeDetail.gradeList && this.gradeDetail.gradeList.reduce((total, cur) => {
        total += cur.scale
        return total
      }, 0)
      if (total != 100) {
        
        this.$message({
          type: 'warning',
          message: '请保证各分数结构总和为100%喔'
        })
      } else {
        let scoreStructureList = this.gradeDetail.gradeList.map(item => {
          return {
            describes: item.describes,
            scale: Number(item.scale) / 100
          }
        })
        let params = {
          id: this.gradeDetail.id,
          scoreStructureList: scoreStructureList
        }
        this.$api.course.setTeacherCourseDetail(params).then(res => {
          if (res.code === 200) {
            this.gradeDetail.gradeList = []
            this.getTeacherCourseList()
            this.closeGrade()
            this.gradeDetail.gradeList = []
          }
        })
      }
    },
    /**
     * 获取教师列表
     */
    getTeacherList() {
      // this.loading = true
      let query = {
        pageNum: 1,
        pageSize: -1
      }
      this.$api.manager.getTeacherList(query).then(res => {
        if (res.code === 200) {
          this.teacherList = res.data.records
          // this.total = res.data.total
          // this.loading = false
        }
      }).catch(err => this.loading = false)
    },
    /**
     * 编辑弹框保存课程修改信息
     */
    submitForm (msg) {
      if (msg === 'editForm') {
        this.$api.course.discCourse(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getCourseList()
          }
        }).catch(err => this.editFormVisible = false)
      } else {
        delete this.editForm.id
        this.$api.course.addCourse(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getCourseList()
          }
        })
      }
    },
    /**
     * 获取课程列表
     */
    getCourseList() {
      this.loading = true
      this.$api.course.getCourseList(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.courseList = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      }).catch(err => this.loading = false)
    },
    /**
     * 分页插件事件
     */
    callFather(parm) {
      this.pageQuery.pageNum = parm.currentPage
      this.pageQuery.pageSize = parm.pageSize
      this.getCourseList()
    },
    /**
     * 关闭编辑、增加弹出框
     */
    closeDialog() {
      this.editFormVisible = false
    },
    /**
     * 编辑课程
     */
    editCourse (course) {
      this.editOrAdd = true
      this.editFormVisible = true
      this.editTitle = "编辑课程"
      this.editForm.id = course.id
      this.editForm.courseName = course.courseName
      this.editForm.teacherId = course.teacherId
      // this.editForm.level = course.level
    },
    /**
     * 增加课程
     */
    addCourse () {
      this.editOrAdd = false
      this.editFormVisible = true
      this.editTitle = "添加课程"
      this.editForm.courseName = ''
      this.editForm.teacherId = ''
    },
    /**
     * 删除课程
     */
    deleteCourse (index, course) {
      this.$api.course.deleteCourse({id:course.id}).then(res => {
        if (res.code === 200) {
          this.getCourseList()
        }
      })
    }
  }
}
</script>

<style>
.course-search {
  margin-top: 20px;
}
.courseRole {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.grade-box .add-grade{
  margin-bottom: 20px;
}
.grade-box  .el-button-1{
  margin-right: 10px;
}
</style>

 
 